<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="Keywords" content="MineData">
    <meta name="Description" content="MineData">
    <meta name="robots" content="none">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="maximum-scale=1">
    <link href="img/common/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <title>collada三维精模加载</title>
    <link rel="stylesheet" href="//minedata.cn/minemapapi/v1.3/minemap.css">

    <style>
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #map {
            width: 100%;
            height: 100%;
            background-color: #ffffff;
        }

        figure {
            position: relative;
            margin: auto;
            width: 6.250em;
            height: 6.250em;
            animation: rotate 2.4s linear infinite;
        }

        .white {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            animation: flash 2.4s linear infinite;
            opacity: 0;
        }

        .dot {
            position: absolute;
            margin: auto;
            width: 2.4em;
            height: 2.4em;
            border-radius: 100%;
            transition: all 1s ease;
        }

        .dot:nth-child(2) {
            top: 0;
            bottom: 0;
            left: 0;
            background: #FF4444;
            animation: dotsY 2.4s linear infinite;
        }

        .dot:nth-child(3) {
            left: 0;
            right: 0;
            top: 0;
            background: #FFBB33;
            animation: dotsX 2.4s linear infinite;
        }

        .dot:nth-child(4) {
            top: 0;
            bottom: 0;
            right: 0;
            background: #99CC00;
            animation: dotsY 2.4s linear infinite;
        }

        .dot:nth-child(5) {
            left: 0;
            right: 0;
            bottom: 0;
            background: #33B5E5;
            animation: dotsX 2.4s linear infinite;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0);
            }
            10% {
                width: 6.250em;
                height: 6.250em;
            }
            66% {
                width: 2.4em;
                height: 2.4em;
            }
            100% {
                transform: rotate(360deg);
                width: 6.250em;
                height: 6.250em;
            }
        }

        @keyframes dotsY {
            66% {
                opacity: .1;
                width: 2.4em;
            }
            77% {
                opacity: 1;
                width: 0;
            }
        }

        @keyframes dotsX {
            66% {
                opacity: .1;
                height: 2.4em;
            }
            77% {
                opacity: 1;
                height: 0;
            }
        }

        @keyframes flash {
            33% {
                opacity: 0;
                border-radius: 0%;
            }
            55% {
                opacity: .6;
                border-radius: 100%;
            }
            66% {
                opacity: 0;
            }
        }

        #loading {
            position: absolute;
            top: 35%;
            left: 0;
            right: 0;
        }
        #loader {
            position: relative;
            width: 6.250em;
            height: 6.250em;
        }
        #loading-info {
            height: 40px;
            line-height: 40px;
            text-align: center;
            vertical-align: middle;
            font-size: 14px;
            color: #555555;
        }
    </style>
<link href="./css/commons.min.css?v=70db06ae" rel="stylesheet"></head>
<body>
<div id="map" class="map"></div>
<div id="loading">
    <center>
        <div id="loader">
            <figure>
                <div class="dot white"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </figure>
        </div>
        <div id="loading-info">三维模型数据较大，请您耐心等候一下</div>
    </center>
</div>
<script src="lib/threebox/threebox.js" type="text/javascript"></script>
<script src="//minedata.cn/minemapapi/v1.3/minemap.js"></script>
<script type="text/javascript" src="./js/commons.js?v=fd9441f2"></script><script type="text/javascript" src="./js/collada-load-demo.bundle.js?v=fd9441f2"></script></body></html>